<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/weixiujingfei_tiaozhuan.css">
    <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../js/allData.js"></script>
    <script src="../js/utils.js"></script>
</head>

<body>
    <div class="container-fluid header">

        <div class="h3_box">
            <h3 class="qicai_h3">器材列表</h3>
        </div>

        <div class="pandian_box">
            <div class="pandian_bot">
                <span>器材编号</span>
                <input id="qicaibianhao" type="text" onfocus="this.placeholder=''" onblur="this.placeholder='器材编号'" placeholder="器材编号">
            </div>

            <div class="pandian_top">
                <span>器材名称</span>
                <input id="qicaimingcheng" type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入器材名称'"
                    placeholder="请输入器材名称">
            </div>
        </div>
        <div class="pandian_box">
            <div class="pandian_top">
                <span>库存数量</span>
                <input id="kucunshuliang" type="text" onfocus="this.placeholder=''" onblur="this.placeholder='+5'" placeholder="+5">
            </div>
            <div class="pandian_bot">
                <span>规格型号</span>
                <input id="guigexinghao" type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入型号'" placeholder="请输入型号">
            </div>
        </div>

        <table class="table">
            <thead id="thead">
                <tr>
                    <th>序号</th>
                    <th>器材编号</th>
                    <th>器材名称</th>
                    <th>规格型号</th>
                    <th>库存</th>
                </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>
        <div class="btn_box">
            <div>
                <button class="quxiao">取消</button>
                <button class="tijiao">提交</button>
            </div>

        </div>

        <!-- 登录提示弹框 -->
        <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
                    </div>
                    <div class="modal-body">您还没有登录，请先登录</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary queding">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>

    <script>
        let user = JSON.parse(sessionStorage.getItem('user'));
        // let userName = document.querySelector('.register_box>span')
        // console.log(user);

        if (user == null) {
            $('#myModals').modal('show')
        } else {
            $('.register_box>span').text(user.username)
        }
        $('.queding').click(function () {
            location.href = '../login.html'
        })


        let guanliData = getData('guanliList')

        let huohua = 0
        let huoList = []
        let you = 0

        function showTable(data) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].name == '油泵') {
                    you++
                } else if (data[i].name == '火花塞') {
                    huohua++
                }
            }
            for (let i = 0; i < data.length; i++) {

                for (let j = i + 1; j < data.length; j++) {
                    if (data[i].name == data[j].name) {
                        data.splice(j, 1);
                        j--
                    }

                }

            }
            data[0]['kucun'] = you
            data[1]['kucun'] = huohua
            console.log(data);


            $('#tbody').html('');
            $.each(data, (index, item) => {
                $('#tbody').append(`
                    <tr>
                        <td>${index+1}</td>
                        <td>${item.bianhao}</td>
                        <td>${item.name}</td>
                        <td>${item.xinghao}</td>
                        <td>${item.kucun}</td>
                    </tr>
                `)
            })
        }
        showTable(guanliData)


        // 加入明细
        // let kucunList = kuCunPanDianList;
        let addKucun = []

        function addMingxi() {
            let danjuDate = document.getElementById('danjuriqi').value;
            let panDiandanhao = document.getElementById('pandiandanhao').value;
            addKucun.push({date:danjuDate,danhao:panDiandanhao,zhidan:'库管A',zhuangtai:'待审核',shenheren:'—— ——'});
            setData('addKucun',addKucun)
        }

        // setData('addKucun','')
        function setData(key, value) {
            // key:用来放value的一个空间 value:这里用来存储了一个JSON对象
            // 将JSON对象转换成字符串
            let valueStr = JSON.stringify(value)
            // 将JSON格式的字符串上传到浏览器本地存储
            sessionStorage.setItem(key, valueStr)
        }

        // 新增器材
        $('.tijiao').click(function(){
            let qicaibianhao = document.getElementById('qicaibianhao').value;
            let qicaimingcheng = document.getElementById('qicaimingcheng').value;
            let kucunshuliang = document.getElementById('kucunshuliang').value;
            let guigexinghao = document.getElementById('guigexinghao').value;

            guanliData.push({bianhao:qicaibianhao,name:qicaimingcheng,kucun:kucunshuliang,xinghao:guigexinghao});
            showTable(guanliData)
        })
    </script>
</body>

</html>